<script setup>
import { ref,onMounted } from 'vue'
import { queryDetailsAll } from '../../api/warehousingentrydetails'

//定义表格数据
const detailsList = ref([])
//查询的点击事件
const query = async ()=>{ 
  const result = await queryDetailsAll(page.value,pageSize.value,detailsFrom.value.supplierName)
  detailsList.value = result.data.rows
  total.value = result.data.total
}

//定义表单数据
const detailsFrom = ref({supplierName:''})
//清空表单数据
const clear = ()=>{
  detailsFrom.value = {supplierName:''}
  query()
}

//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}

//挂载
onMounted(() => {
  query()
})
</script>

<template>
<div><h4>收货明细</h4></div>
<div>
  <el-form :inline="true" :model="detailsFrom" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="detailsFrom.supplierName" placeholder="供应商名称" style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query" plain>查询</el-button>
      <el-button type="default" @click="clear" plain>清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="detailsList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="80"/>
    <el-table-column prop="batchNumber" label="批次号" align="center" width="120"/>
    <el-table-column prop="skuNumber" label="商品编号" align="center" width="120"/>
    <el-table-column prop="supplierName" label="供应商名称" align="center" width="180"/>
    <el-table-column prop="title" label="商品名称" align="center" width="200"/>
    <el-table-column prop="price" label="商品价格" align="center" width="120"/>
    <el-table-column prop="pickingNumber" label="分拣总数量" align="center" width="120"/>
    <el-table-column prop="upNumber" label="上架数量" align="center" width="120"/>
    <el-table-column prop="status" label="状态" align="center" width="120">
      <template #default="scope">
      <el-tag v-if="scope.row.status==1" type="info">未到货</el-tag>
      <el-tag v-else-if="scope.row.status==2" type="warning">已到货</el-tag>
      <el-tag v-else-if="scope.row.status==3" type="primary">已卸货</el-tag>
      <el-tag v-else-if="scope.row.status==4" type="warning">分拣中</el-tag>
      <el-tag v-else-if="scope.row.status==5" type="success">完成分拣</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="consignorName" label="货主名称" align="center"  width="200"/>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>
</template>
<style scoped>
</style>